<template>
  <div class="bs-select-person">
     <Tabs v-model="tab1">
        <TabPane label="机构成员" name="name1">
        </TabPane>
        <TabPane label="云通讯录" name="name2">
        </TabPane>
    </Tabs>

    <div class="content" v-show="tab1=='name1'">
       选择机构
          <Select v-model="select1" style="width:140px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select> 
          <Input  style="width:180px;" placeholder="请输入姓名或手机号"/>
          <Button type="primary" >查询</Button>

          <div class="mt20">
            <Tree :data="data2" show-checkbox></Tree>
          </div>
    </div>

    <div class="content" v-show="tab1=='name2'">
          <Input  style="width:180px;" placeholder="请输入姓名或手机号"/>
          <Button type="primary" >查询</Button>

          <div class="mt20">
            <CheckboxGroup v-model="single">
            <ul class="person-list">
              <li v-for="i in 20" :key="i">
                <Checkbox :label="i" >&nbsp;</Checkbox>
                  张大伟
                  &nbsp;&nbsp;
                  13087889999
              </li>
            </ul>
            </CheckboxGroup>
          </div>
    </div>


  </div>
</template>

<script>

export default {
  components:{},
  data () {
    return {
      single: [],
      select1: '1',
      tab1: 'name1',
      cityList: [
        {label: '县教育局', value: '1'},
        {label: '区教育局', value: '2'},        
      ],
      data2: [{
          title: '全部',
          expand: true,
          children: [{
              title: '总经办(5)',
              expand: true,
              children: [{
                  title: '老王1'
                },
                {
                  title: '老王2'
                }
              ]
            },
            {
              title: '研发部(20)',
              expand: true,
              children: [{
                  title: '研发1'
                },
                {
                  title: '研发2'
                }
              ]
            }
          ]
        }],
    }
  }
}
</script>

<style lang="less" scoped> 
.person-list{
  overflow: hidden;
  li{
    width: 50%;
    margin-bottom: 10px;
    float: left;
  }
}
</style>
